<template>
  <view class="page">
    <view class="box">
      <div class="load">
        <div class="bounce1 load-div"></div>
        <div class="bounce2 load-div"></div>
        <div class="bounce3 load-div"></div>
      </div>
  </view>
  </view>
</template>

<script>
export default {
  name: 'DdykLoading',
  props:{
    isShow:Boolean
  },
  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style scoped>
  .page{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  .box{
    width: 200rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #fff; */
    
  }
  .load {
    width: 300rpx;
    text-align: center;
  }
  .load-div{
    width: 60rpx;
    height: 60rpx;
    background-color: rgb(142, 84, 244);
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.7s infinite ease-in-out;
    animation: bouncedelay 1.7s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .load .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .load .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
    
  @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(0.7) }
  }
  @keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 40% {
      transform: scale(0.7);
      -webkit-transform: scale(0.7);
    }
  }
</style>
